import React, { Component } from 'react';
import { Dispatch } from 'redux';

import _ from 'lodash';
import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Modal, Table } from 'antd';
import '@ant-design/compatible/assets/index.css';

import { columns } from '../constant';

interface bindCabinetProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    cabinetList: any;
    loading: any;
    visible: boolean;
    serviceId: number;
    bindCabinet: (visible: boolean) => void;
    type: number;
}

interface bindCabinetState {
    pageIndex: number;
    pageSize: any;
}

class BindCabinetElem extends Component<bindCabinetProps, bindCabinetState> {
    state = {
        pageIndex: 1,
        pageSize: 5,
    }

    componentDidUpdate(prevProps: any, prevState: any) {
        const { serviceId } = this.props;
        const { pageIndex, pageSize } = this.state;
        if (
            (pageIndex !== prevState.pageIndex
                || pageSize !== prevState.pageSize
                || serviceId !== prevProps.serviceId) && serviceId !== 0) {
            this.fetchBindCabinet();
        }
    }

    fetchBindCabinet = () => {
        const { dispatch, serviceId, type } = this.props;
        const { pageIndex, pageSize } = this.state;

        dispatch({
            type: 'tencentOverview/fetchBindCabinet',
            payload: { serviceId, pageIndex, pageSize, type },
        });
    }

    // 分页
    onSelectChange = (pageIndex: number, pageSize: number | undefined) => {
        this.setState({ pageIndex, pageSize });
    };

    // 关闭弹框
    cancelCheck = () => {
        const { bindCabinet } = this.props;

        this.setState({ pageIndex: 1, pageSize: 5 });
        bindCabinet(false);
    }

    render() {
        const {
            visible, cabinetList, loading, type
        } = this.props;

        const { pageIndex, pageSize } = this.state;
        const pagination = cabinetList
            ? {
                total: cabinetList.count,
                pageSize: pageSize ? Number(pageSize) : 5,
                current: pageIndex ? Number(pageIndex) : 1,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
                showTotal: () => `共${cabinetList.count}条数据`,
                onChange: this.onSelectChange,
                onShowSizeChange: this.onSelectChange,
            }
            : {};

        return (
            <>
                <Modal
                    title={`绑定${type === 1 ? '柜体' : type === 2 ? '旧货架' : '新货架'}`}
                    visible={visible}
                    width={800}
                    footer={null}
                    onCancel={this.cancelCheck}
                >
                    <Table
                        rowKey="id"
                        loading={loading}
                        columns={columns}
                        dataSource={cabinetList.list}
                        pagination={pagination}
                    />
                </Modal>
            </>
        );
    }
}

export default Form.create<bindCabinetProps>()(BindCabinetElem);
